<template>
  <div class="right_container">
    <p class="righttou">
      <!-- <span id="score1" v-on:click="converters">{{ norm }}</span>
      <span id="score2" v-on:click="converters"> ⇋ </span>
      <span id="score3" v-on:click="converters">{{ accelerate }} </span> -->
      指标情况
    </p>

    <ul class="tab">
      <li @click="cur = 0" :class="{ active: cur == 0 }">经营实力</li>
      <li @click="cur = 1" :class="{ active: cur == 1 }">核心技术</li>
      <li @click="cur = 2" :class="{ active: cur == 2 }">服务品质</li>
      <li @click="cur = 3" :class="{ active: cur == 3 }">企业治理</li>
      <li @click="cur = 4" :class="{ active: cur == 4 }">绿色发展</li>
      <li @click="cur = 5" :class="{ active: cur == 5 }">品牌价值</li>
    </ul>

    <div>
      <div v-show="cur == 0">
        <div>
          <el-select
            v-model="value1"
            placeholder="请选择"
            style="
              width: 95%;
              height: 100%;
              z-index: 99;
              margin: 10px auto;
              padding: 0 0px;
            "
            popper-class="select-option"
            :poper-append-to-body="false"
            @change="changeoptions"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div id="rollbotton">
          <p v-for="(v, index) in profit" :key="v.index">
            <img v-if="index == 0" src="./img/1_03.gif" />
            <img v-if="index == 1" src="./img/1_06.gif" />
            <img v-if="index == 2" src="./img/1_08.gif" />
            <span v-if="index > 2">{{ index + 1 }}</span>

            <span
              >{{ v.name
              }}<span
                style="
                  text-aling: right;
                  display: inlink-block;
                  float: right;
                  padding-right: 10px;
                "
                v-if="v.income != 0"
                >{{ v.income }}<span v-if="wan">万元</span
                ><span v-if="yi">亿千瓦时</span></span
              >
              <span
                v-if="v.income == 0 && v.complete != 0"
                style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right"
                >{{ v.complete }}%</span
              >
              <span style="display: block; width: 100%; height: 13px">
                <span
                  style="
                    display: inline-block;
                    width: 90%;
                    background: #ecf6f2;
                    height: 13px;
                    border-radius: 6.5px;
                  "
                  v-if="index == 0"
                >
                  <span
                    :style="{ width: v.complete + '%' }"
                    class="span4"
                  ></span>
                </span>
                <span
                  style="
                    display: inline-block;
                    width: 90%;
                    background: #ecf6f2;
                    height: 13px;
                    border-radius: 6.5px;
                  "
                  v-if="index == 1"
                >
                  <span
                    :style="{ width: v.complete + '%' }"
                    class="span3"
                  ></span>
                </span>
                <span
                  style="
                    display: inline-block;
                    width: 90%;
                    background: #ecf6f2;
                    height: 13px;
                    border-radius: 6.5px;
                  "
                  v-if="index == 2"
                >
                  <span
                    :style="{ width: v.complete + '%' }"
                    class="span2"
                  ></span>
                </span>
                <span
                  style="
                    display: inline-block;
                    width: 90%;
                    background: #ecf6f2;
                    height: 13px;
                    border-radius: 6.5px;
                  "
                  v-if="index > 2"
                >
                  <span
                    :style="{ width: v.complete + '%' }"
                    class="span1"
                  ></span>
                </span>
              </span>
            </span>
          </p>
        </div>
      </div>
      <div>
        <div v-show="cur == 1">
          <!-- 核心技术 -->
          <div>
            <el-select
              v-model="value2"
              placeholder="请选择"
              style="
                width: 95%;
                height: 100%;
                z-index: 99;
                margin: 10px auto;
                padding: 0 0px;
              "
              popper-class="select-option"
              :poper-append-to-body="false"
              @change="changeoptions2"
            >
              <el-option
                v-for="item in option2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div id="rollbotton">
            <p v-for="(v, index) in profit2" :key="v.index">
              <img v-if="index == 0" src="./img/1_03.gif" />
              <img v-if="index == 1" src="./img/1_06.gif" />
              <img v-if="index == 2" src="./img/1_08.gif" />
              <span v-if="index > 2">{{ index + 1 }}</span>

              <span
                >{{ v.name
                }}<span
                  style="
                    text-aling: right;
                    display: inlink-block;
                    float: right;
                    padding-right: 10px;
                  "
                  v-if="v.income != 0"
                  >{{ v.income }}<span v-if="wan">万元</span
                  ><span v-if="yi">亿瓦时</span></span
                >
                <span
                  v-if="v.income == 0 && v.complete != 0"
                  style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right"
                  >{{ v.complete }}%</span
                >
                <span style="display: block; width: 100%; height: 13px">
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 0"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span4"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 1"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span3"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span2"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index > 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span1"
                    ></span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
        <div v-show="cur == 2">
          <!-- 服务品质 -->
          <div>
            <el-select
              v-model="value3"
              placeholder="请选择"
              style="
                width: 95%;
                height: 100%;
                z-index: 99;
                margin: 10px auto;
                padding: 0 0px;
              "
              popper-class="select-option"
              :poper-append-to-body="false"
              @change="changeoptions3"
            >
              <el-option
                v-for="item in option3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div id="rollbotton">
            <p v-for="(v, index) in profit3" :key="v.index">
              <img v-if="index == 0" src="./img/1_03.gif" />
              <img v-if="index == 1" src="./img/1_06.gif" />
              <img v-if="index == 2" src="./img/1_08.gif" />
              <span v-if="index > 2">{{ index + 1 }}</span>

              <span
                >{{ v.name
                }}<span
                  style="
                    text-aling: right;
                    display: inlink-block;
                    float: right;
                    padding-right: 10px;
                  "
                  v-if="v.income != 0"
                  >{{ v.income }}<span v-if="wan">万元</span
                  ><span v-if="yi">亿瓦时</span></span
                >
                <span
                  v-if="v.income == 0 && v.complete != 0"
                  style="display:inline-block; width:23%;font-size=11px ;text-aling:right;float:right"
                  >{{ v.complete }}%</span
                >
                <span style="display: block; width: 100%; height: 13px">
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 0"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span4"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 1"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span3"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span2"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index > 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span1"
                    ></span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
        <div v-show="cur == 3">
          <div>
            <el-select
              v-model="value4"
              placeholder="请选择"
              style="
                width: 95%;
                height: 100%;
                z-index: 99;
                margin: 10px auto;
                padding: 0 0px;
              "
              popper-class="select-option"
              :poper-append-to-body="false"
              @change="changeoptions4"
            >
              <el-option
                v-for="item in option4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div id="rollbotton">
            <p v-for="(v, index) in profit4" :key="v.index">
              <img v-if="index == 0" src="./img/1_03.gif" />
              <img v-if="index == 1" src="./img/1_06.gif" />
              <img v-if="index == 2" src="./img/1_08.gif" />
              <span v-if="index > 2">{{ index + 1 }}</span>

              <span
                >{{ v.name
                }}<span
                  style="
                    text-aling: right;
                    display: inlink-block;
                    float: right;
                    padding-right: 10px;
                  "
                  v-if="v.income != 0"
                  >{{ v.income }}<span v-if="wan">万元</span
                  ><span v-if="yi">亿瓦时</span></span
                >
                <span
                  v-if="v.income == 0 && v.complete != 0"
                  style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right"
                  >{{ v.complete }}%</span
                >
                <span style="display: block; width: 100%; height: 13px">
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 0"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span4"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 1"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span3"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span2"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index > 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span1"
                    ></span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
        <div v-show="cur == 4">
          <!-- 绿色发展 -->
          <div>
            <el-select
              v-model="value5"
              placeholder="请选择"
              style="
                width: 95%;
                height: 100%;
                z-index: 99;
                margin: 10px auto;
                padding: 0 0px;
              "
              popper-class="select-option"
              :poper-append-to-body="false"
              @change="changeoptions5"
            >
              <el-option
                v-for="item in option5"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div id="rollbotton">
            <p v-for="(v, index) in profit5" :key="v.index">
              <img v-if="index == 0" src="./img/1_03.gif" />
              <img v-if="index == 1" src="./img/1_06.gif" />
              <img v-if="index == 2" src="./img/1_08.gif" />
              <span v-if="index > 2">{{ index + 1 }}</span>

              <span
                >{{ v.name
                }}<span
                  style="
                    text-aling: right;
                    display: inlink-block;
                    float: right;
                    padding-right: 10px;
                  "
                  v-if="v.income != 0"
                  >{{ v.income }}<span v-if="wan">万元</span
                  ><span v-if="yi">亿瓦时</span></span
                >
                <span
                  v-if="v.income == 0 && v.complete != 0"
                  style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right"
                  >{{ v.complete }}%</span
                >
                <span style="display: block; width: 100%; height: 13px">
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 0"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span4"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 1"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span3"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span2"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index > 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span1"
                    ></span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
        <div v-show="cur == 5">
          <!-- 品牌价值
           -->
          <div>
            <el-select
              v-model="value6"
              placeholder="请选择"
              style="
                width: 95%;
                height: 100%;
                z-index: 99;
                margin: 10px auto;
                padding: 0 0px;
              "
              popper-class="select-option"
              :poper-append-to-body="false"
              @change="changeoptions6"
            >
              <el-option
                v-for="item in option6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div id="rollbotton">
            <p v-for="(v, index) in profit6" :key="v.index">
              <img v-if="index == 0" src="./img/1_03.gif" />
              <img v-if="index == 1" src="./img/1_06.gif" />
              <img v-if="index == 2" src="./img/1_08.gif" />
              <span v-if="index > 2">{{ index + 1 }}</span>

              <span
                >{{ v.name
                }}<span
                  style="
                    text-aling: right;
                    display: inlink-block;
                    float: right;
                    padding-right: 10px;
                  "
                  v-if="v.income != 0"
                  >{{ v.income }}<span v-if="wan">万元</span
                  ><span v-if="yi">亿瓦时</span></span
                >
                <span
                  v-if="v.income == 0 && v.complete != 0"
                  style="display:inline-block; width:15%;font-size=11px ;text-aling:right;float:right"
                  >{{ v.complete }}%</span
                >
                <span style="display: block; width: 100%; height: 13px">
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 0"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span4"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 1"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span3"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index == 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span2"
                    ></span>
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 90%;
                      background: #ecf6f2;
                      height: 13px;
                      border-radius: 6.5px;
                    "
                    v-if="index > 2"
                  >
                    <span
                      :style="{ width: v.complete + '%' }"
                      class="span1"
                    ></span>
                  </span>
                </span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
// @import "data/rightbutton.json"
import Daily from '@/assets/data/daily.js' // 引入

export default {
  data() {
    return {
      cur: "0",
      norm: "指标情况",
      accelerate: "完成率",
      jiantou: true,
      shuju: {},
      options: [
      ],
      option2: [],
      option3: [],
      option4: [],
      option5: [],
      option6: [],
      value1: "1",
      value2: "1",
      value3: "1",
      value4: "1",
      value5: "1",
      value6: "1",
      profit: [],
      profit2: [],
      profit3: [],
      profit4: [],
      profit5: [],
      profit6: [],
      II: 8,
      wan: true,
      yi: false,
    };
  },
  watch: {},
  mounted() {
    this.profitone(this.II);
    // console.log(this.value);
     console.log(Daily.tmbTmbsContent[0].rightbutton)
    this.information();
  },
  methods: {
    information() {
          this.shuju =Daily.tmbTmbsContent[0].rightbutton;
                  
          // console.log(res.data.rightbutton)
          this.options = Daily.tmbTmbsContent[0].rightbutton.jingtying.option;
          this.option2 = Daily.tmbTmbsContent[0].rightbutton.hexin.option;
          this.option3 = Daily.tmbTmbsContent[0].rightbutton.fuwu.option;
          this.option4 = Daily.tmbTmbsContent[0].rightbutton.qiye.option;
          this.option5 = Daily.tmbTmbsContent[0].rightbutton.lvse.option;
          this.option6 = Daily.tmbTmbsContent[0].rightbutton.pinpan.option;
          // if(this.value==1){
          // console.log(res.data.rightbutton.jingtying.lirun.data)
          this.profit = Daily.tmbTmbsContent[0].rightbutton.jingtying.yingye.data.sort(
            this.compare("income")
          );
          // this.profit=res.data.rightbutton.jingtying.yingye.data.sort(compare(income))
          this.profit2 = Daily.tmbTmbsContent[0].rightbutton.hexin.yanfa.data.sort(
            this.compare("income")
          );
          this.profit3 = Daily.tmbTmbsContent[0].rightbutton.fuwu.zhongda.data.sort(
            this.compare("income")
          );
          this.profit4 = Daily.tmbTmbsContent[0].rightbutton.qiye.hegui.data.sort(
            this.compare("income")
          );
          this.profit5 =Daily.tmbTmbsContent[0].rightbutton.lvse.xian.data.sort(
            this.compare("complete")
          );
          this.profit6 = Daily.tmbTmbsContent[0].rightbutton.pinpan.xinyong.data.sort(
            this.compare("income")
          );
          // console.log("shuju",this.shuju);
          // }
       
       
    },
    changeoptions() {
      if (this.value1 == 1) {
        // this.profit=this.shuju.jingtying.yingye.data;
        this.profit = this.shuju.jingtying.yingye.data.sort(
          this.compare("income")
        );
        //  console.log("value1==1",this.profit,this.shuju.jingtying.yingye.data.sort(this.compare('income')))
      } else if (this.value1 == 2) {
        this.profit = this.shuju.jingtying.lirun.data.sort(
          this.compare("income")
        );
        // console.log("value1==2",this.profit)
      } else if (this.value1 == 3) {
        this.profit = this.shuju.jingtying.zichanzonge.data.sort(
          this.compare("income")
        );
        //  console.log("value1==3",this.profit)
      } else if (this.value1 == 4) {
        this.profit = this.shuju.jingtying.fuzhai.data.sort(
          this.compare("complete")
        );
        //  console.log("value1==4",this.profit)
      } else if (this.value1 == 5) {
        this.profit = this.shuju.jingtying.eva.data.sort(
          this.compare("income")
        );
        //  console.log("value1==5",this.profit)
      } else if (this.value1 == 6) {
        this.profit = this.shuju.jingtying.kekong.data.sort(
          this.compare("income")
        );
        //  console.log("value1==6",this.profit)
      } else if (this.value1 == 7) {
        this.profit = this.shuju.jingtying.zhigong.data.sort(
          this.compare("income")
        );
        this.yi = false;
        this.wan = false;
        //  console.log("value1==7",this.profit)
      } else if (this.value1 == 8) {
        this.profit = this.shuju.jingtying.laodong.data.sort(
          this.compare("income")
        );
        //  console.log("value1==8",this.profit)
      } else if (this.value1 == 9) {
        this.profit = this.shuju.jingtying.shoudian.data.sort(
          this.compare("income")
        );
        this.yi = true;
        this.wan = false;
        //  console.log("value1==9",this.profit)
      } else if (this.value1 == 10) {
        this.profit = this.shuju.jingtying.shengjian.data.sort(
          this.compare("income")
        );
        this.yi = false;
        this.wan = true;
        //  console.log("value1==10",this.profit)
      } else if (this.value1 == 11) {
        this.profit = this.shuju.jingtying.shichang.data.sort(
          this.compare("income")
        );
        //  console.log("value1==11",this.profit)
      } else if (this.value1 == 12) {
        this.profit = this.shuju.jingtying.gongsi.data.sort(
          this.compare("income")
        );
        //  console.log("value1==12",this.profit)
      } else if (this.value1 == 13) {
        this.profit = this.shuju.jingtying.huishou.data.sort(
          this.compare("complete")
        );
        //  console.log("value1==13",this.profit)
      } else if (this.value1 == 14) {
        this.profit = this.shuju.jingtying.zhanyou.data.sort(
          this.compare("income")
        );
        //  console.log("value1==14",this.profit)
      } else if (this.value1 == 15) {
        this.profit = this.shuju.jingtying.touzi.data.sort(
          this.compare("income")
        );
        //  console.log("value1==15",this.profit)
      } else {
        this.wan = true;
        this.yi = false;
      }
    },
    changeoptions2() {
      // console.log("changeoptions2")
      if (this.value2 == 1) {
        this.profit2 = this.shuju.hexin.yanfa.data;
      } else if (this.value2 == 2) {
        this.profit2 = this.shuju.hexin.shuzi.data;
      } else if (this.value2 == 3) {
        this.profit2 = this.shuju.hexin.dianwang.data;
      } else if (this.value2 == 4) {
        this.profit2 = this.shuju.hexin.xinxi.data;
      }
    },
    changeoptions3() {
      // console.log('changeoptions3')
      if (this.value3 == 1) {
        this.profit3 = this.shuju.fuwu.zongda.data.sort(
          this.compare("complete")
        );
        // console.log("this.profit3",this.profit3)
      } else if (this.value3 == 2) {
        this.profit3 = this.shuju.fuwu.kehu.data.sort(this.compare("complete"));
        //  console.log("this.profit3",this.profit3)
      } else if (this.value3 == 3) {
        this.profit3 = this.shuju.fuwu.dianwang.data.sort(
          this.compare("complete")
        );
        // console.log("this.profit3",this.profit3)
      } else if (this.value3 == 4) {
        this.profit3 = this.shuju.fuwu.chengxiang.data.sort(
          this.compare("complete")
        );
        // console.log("this.profit3",this.profit3)
      } else if (this.value3 == 5) {
        this.profit3 = this.shuju.fuwu.zonghe.data.sort(
          this.compare("complete")
        );
        // console.log("this.profit3",this.profit3)
      } else if (this.value3 == 6) {
        this.profit3 = this.shuju.fuwu.yewu.data.sort(this.compare("complete"));
        // console.log("this.profit3",this.profit3)
      }
    },
    changeoptions4() {},
    changeoptions5() {
      if (this.value5 == 1) {
        this.profit5 = this.shuju.lvse.xian.data.sort(this.compare("complete"));
      } else if (this.value5 == 2) {
        this.profit5 = this.shuju.lvse.qingjei.data.sort(
          this.compare("complete")
        );
      }
    },
    changeoptions6() {
      if (this.value6 == 1) {
        this.profit6 = this.shuju.pinpan.xinyong.data.sort(
          this.compare("complete")
        );
      } else if (this.value6 == 2) {
        this.profit6 = this.shuju.pinpan.jiazhi.data;
      }
    },
    profitone(II) {
      this.profits = this.profit.slice(0, II);
      // console.log(this.profits);
    },
    // 排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
    //计划指标滚轮
    // roolbotton() {
    //   this.II += 2;
    //   this.profitone(this.II);
    //   if (this.profits.length > 8) {
    //     // document.getElementById("rollbotton").style.overflowY = "hidden";
    //     document.getElementById("rollbotton").style.overflowY = "scroll";
    //     // document.getElementById("rollbotton").style.scrollbar = "width:0";
    //   } else if (this.II > this.profits.length) {
    //     alert("没有数据了");
    //   } else if (this.profits.length < 9) {
    //     document.getElementById("rollbotton").style.overflowY = "none";
    //   }
    // },
    // 指标    完成率切换
    converters() {
      if (this.jiantou) {
        this.jiantou = false;
        // console.log(this.jiantou);
        this.$el
          .querySelector("#score1")
          .before(this.$el.querySelector("#score3"));
        this.$el
          .querySelector("#score2")
          .after(this.$el.querySelector("#score1"));
      } else {
        this.jiantou = true;
        console.log(this.jiantou);
        this.$el
          .querySelector("#score2")
          .before(this.$el.querySelector("#score1"));
        this.$el
          .querySelector("#score2")
          .after(this.$el.querySelector("#score3"));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  cursor: pointer;
}
.tab {
  display: flex;
  padding: 0;
  justify-content: space-around;
  line-height: 30px;
  font-size: 15px;
  border-top: solid 0.5px #ccc;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
}
.tab li {
  border-bottom: solid 2px #fff;
  color: #c3c3c3;
  min-width: 75px;
  height: 30px;
  margin-top: 10px;
  text-align: center;
}
.tab li.active {
  border-bottom: solid 2px #277f7b;
  color: black;
  font-weight: 700;
}
.tab_con {
  // padding: 3px 8px 0;
  font-size: 12px;
  height: 430px;
}
.el-progress {
  width: 100%;
}
#rollbotton {
  width: 500px;
  height: 450px;
  padding-left: 6px;
  overflow-x: hidden;
  overflow-y: scroll;
}
#rollbotton .el-progress-bar {
  width: 80%;
}
#rollbotton::-webkit-scrollbar {
  width: 8px;
}
#rollbotton::-webkit-scrollbar-track {
  background: rgb(219, 218, 218);
  border-radius: 2px;
}
#rollbotton::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 4px;
}
#rollbotton::-webkit-scrollbar-thumb:hover {
  background: rgb(110, 103, 103);
}

.right_container {
  width: 98%;
  height: 90%;
  background-color: #fff;
  padding: 10px;
  // box-shadow: 0px 0px 20px gainsboro;
  border: 1px solid rgb(211, 209, 209);
}
#rollbotton {
  > p {
    padding: 9.2px 0;
    display: flex;
    // padding-right: 15px;
    justify-content: space-between;

    img {
      width: 35px;
      height: 35px;
      padding-right: 15px;
    }

    > span:nth-child(1) {
      display: inline-block;
      width: 30px;
      margin: 7px 20px 0 4px;
      line-height: 30px;
      text-align: center;
      height: 30px;
      background-color: #ecf6f2;
      border-radius: 50%;
    }
    > span:nth-child(2) {
      flex: 1;
    }
  }
  .span1 {
    display: inline-block;
    height: 13px;
    background: #4aaa84;
    float: left;
    border-radius: 6.5px;
  }
  .span2 {
    display: inline-block;
    height: 13px;
    background: #71bae5;
    float: left;
    border-radius: 6.5px;
  }
  .span3 {
    display: inline-block;
    height: 13px;
    background: #ffcf44;
    float: left;
    border-radius: 6.5px;
  }
  .span4 {
    display: inline-block;
    height: 13px;
    background: #f47b8e;
    float: left;
    border-radius: 6.5px;
  }

  .last {
    display: flex;
    border-top: 1px solid #ccc;
    justify-content: space-around;
    align-items: center;
    height: 20px;
    cursor: pointer;
  }
}
#tab-first {
  padding: 10px;
  height: 450px;
  padding: 0;
}

.righttou :nth-child(2) {
  font-size: 12px;
  color: #7c7c7c;
  cursor: pointer;
}
.righttou :nth-child(3) {
  font-size: 12px;
  color: #7c7c7c;
  cursor: pointer;
}
.righttou {
  font-size: 12px;
  font-weight: bolder;
  width: 400px;
  border-left: solid 3px #277f7b;
  margin: 12px 0;
  padding-left: 15px;
  line-height: 13px;

  cursor: pointer;
}
.title {
  // width: 30%;
  // position: fixed;
  z-index: 99;
  width: 100%;
}
.one {
  font-size: 6px;
  padding-right: -10px;
}
.el-select-dropdown__item {
  padding-left: 19px;
}
</style>
